<template>
    <view class="home">
        <!-- <back></back> -->
        <view class="flex flex-warp">
            <view
                class="margin-right-30 margin-bottom-30 height-140"
                v-for="(item, index) in list"
                :key="index"
                @click="goServer(item.id)"
            >
                <image :src="item.cover" mode="" class="column-img"></image>
                <view class="column-text">{{ item.title }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
        };
    },
    onReady() {
        uni.request({
            url: "https://same.ascetic.top/index.php?i=666&m=longbing_massages_city&s=massage/app/Index/getCategory&urls=massage/app/Index/getCategory&cate_type=1",
            header: {
                autograph: uni.getStorageSync("autograph"),
            },
            success: (res) => {
                this.list = res.data.data;
            },
        });
    },
    methods: {
        goServer(id) {
            uni.navigateTo({
                url: "/user/pages/service-info?id=" + id + "&type=all",
            });
        },
    },
};
</script>

<style>
@import url(../../components/common.css);
.home {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    padding: 30rpx 0 30rpx 30rpx;
}
.column-img {
    width: 94rpx;
    height: 94rpx;
    margin: 0 auto;
    border-radius: 50%;
}
.column-text {
    margin-top: 10rpx;
    text-align: center;
    color: #484848;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.height-140 {
    height: 140rpx;
}
</style>
